<template>
  <div class="goods">
    <div>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>个人中心</span>
              </div>
              <div class="name-role">
                <span class="sender">Admin - {{ formData.realname }}</span>
              </div>
              <div class="registe-info">
                <span class="registe-info">
                  注册时间：
                  <li class="fa fa-clock-o"></li>
                  {{ formData.create }}
                </span>
              </div>
              <el-divider></el-divider>
              <div class="personal-relation">
                <div class="relation-item">
                  <div>手机号:</div>
                  <div style="float: right; padding-right: 20px">
                    {{ formData.cellphone }}
                  </div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">
                  <div>所属地区:</div>
                  <div style="float: right; padding-right: 20px">
                    {{ formData.region }}
                  </div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">
                  <div>性别:</div>
                  <div style="float: right; padding-right: 20px">
                    {{ formData.sex }}
                  </div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">
                  <div>职位:</div>
                  <div style="float: right; padding-right: 20px">
                    {{ formData.department }}
                  </div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">
                  <div>网络状态:</div>
                  <div style="float: right; padding-right: 20px">
                    {{ formData.status == "1" ? "启用" : "弃用" }}
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>基本资料</span>
              </div>
              <div>
                <el-form
                  label-width="80px"
                  v-model="dataFrom"
                  size="small"
                  label-position="right"
                >
                  <el-form-item label="用户昵称" prop="nickName">
                    <el-input
                      auto-complete="off"
                      v-model="formData.name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input
                      auto-complete="off"
                      v-model="formData.cellphone"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button size="mini" type="primary">提交</el-button>
                  <el-button size="mini" type="warning">关闭</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import MJCrequesting from "@/service/index.js";
export default {
  name: "goods",
  setup(props) {
    const store = useStore();
    const idVal = computed(() => store.state.login.userInfo.id);
    const data = reactive({
      formData: {},
    });
    const id = idVal.value;
    onMounted(async () => {
      const result = await MJCrequesting.get({ url: `/getUserList/${id}` });
      if (result.status == 200 && result.data) {
        data.formData = result.data;
      } else {
        ElMessage.error("出错了");
      }
    });

    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss" scope>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
}
//文本样式区
.name-role {
  font-size: 16px;
  padding: 5px;
  text-align: center;
}
.sender {
  text-align: center;
}
.registe-info {
  text-align: center;
  padding-top: 10px;
}
.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%;
}
.relation-item {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-footer {
  padding-top: 10px;
  padding-left: 10%;
}
//布局样式区
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
